<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        ul li{
            list-style: none;
        }

        a{
            text-decoration: none;
        }

        em{
            font-style: normal;
        }

        /* 清除浮动 */
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /* 清除浮动,IE6、IE7专有 */
        .clearfix {
            *zoom: 1;
        }

        /* 版心 */
        .w{
            margin:auto;
            width: 1200px;
        }

        .goods{
            margin:100px auto;
        }

        .goods ul li{
            float: left;
            width: 280px;
            height: 476px;
            background-color: #fff;
            margin-right: 20px;
            margin-bottom: 10px;
        }

        .good_pic{
            width: 100%;
        } 

        .good_title{
            font-size: 14px;
            font-weight: 400;
            color: #666;
            margin: 0 20px 10px 20px;
        }

        .good_amount{
            margin-left: 16px;
        }

        .good_amount em{
            font-size: 20px;
            color: #f00;
        }

        .good_amount del{
            color: #a4a4a4;
            margin-left: 5px;
        }
   
        .sale{
            height: 18px;
            font-size: 12px;
            color: #666;
            margin:10px 0 8px 16px;
        }

        .sell{
            float: left;
        }

        .percent{
            color: #f24349;
        }

        .process{
            float: left;
            width: 134px;
            height: 13px;
            border:1px solid #b1191a;
            margin-left: 8px;
            border-radius: 7px;
        }

        .bar{
            width: 87%;
            height: 13px;
            background-color: #f24349;
        }

        .remain{
            float: left;
            margin-left: 8px;
        }

        .remain em{
            color: #f24349;
        }

        .buy{
            display: block;
            width: 260px;
            height: 45px;
            line-height: 45px;
            background-color: #b1191a;
            color: #ffffff;
            text-align: center;
            margin-left: 13px;
        }
    </style>
</head>
<body>
    <div class="goods w">
        <ul class="good clearfix" >
            <li>
                <img class="good_pic" src="images/mobile.jpg" alt="">
                <h3 class="good_title" >Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h3>
                <p class="good_amount" ><em>¥6080</em><del>¥6988</del></p>
                <div class="sale" >
                    <div class="sell" >已售<span class="percent">87%</span></div>
                    <div class="process" >
                        <div class="bar" ></div>
                    </div>
                    <div class="remain" >剩余<em>29</em>件</div>
                </div>
                <a href="#" class="buy" >立即抢购</a>
            </li>
            <li>
                <img class="good_pic" src="images/mobile.jpg" alt="">
                <h3 class="good_title" >Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h3>
                <p class="good_amount" ><em>¥6080</em><del>¥6988</del></p>
                <div class="sale" >
                    <div class="sell" >已售<span class="percent">87%</span></div>
                    <div class="process" >
                        <div class="bar" ></div>
                    </div>
                    <div class="remain" >剩余<em>29</em>件</div>
                </div>
                <a href="#" class="buy" >立即抢购</a>
            </li>
            <li>
                <img class="good_pic" src="images/mobile.jpg" alt="">
                <h3 class="good_title" >Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h3>
                <p class="good_amount" ><em>¥6080</em><del>¥6988</del></p>
                <div class="sale" >
                    <div class="sell" >已售<span class="percent">87%</span></div>
                    <div class="process" >
                        <div class="bar" ></div>
                    </div>
                    <div class="remain" >剩余<em>29</em>件</div>
                </div>
                <a href="#" class="buy" >立即抢购</a>
            </li>
            <li>
                <img class="good_pic" src="images/mobile.jpg" alt="">
                <h3 class="good_title" >Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h3>
                <p class="good_amount" ><em>¥6080</em><del>¥6988</del></p>
                <div class="sale" >
                    <div class="sell" >已售<span class="percent">87%</span></div>
                    <div class="process" >
                        <div class="bar" ></div>
                    </div>
                    <div class="remain" >剩余<em>29</em>件</div>
                </div>
                <a href="#" class="buy" >立即抢购</a>
            </li>
            <li>
                <img class="good_pic" src="images/mobile.jpg" alt="">
                <h3 class="good_title" >Apple苹果iPhone 6s Plus (A1699) 32G 金色 移动联通电信4G手机</h3>
                <p class="good_amount" ><em>¥6080</em><del>¥6988</del></p>
                <div class="sale" >
                    <div class="sell" >已售<span class="percent">87%</span></div>
                    <div class="process" >
                        <div class="bar" ></div>
                    </div>
                    <div class="remain" >剩余<em>29</em>件</div>
                </div>
                <a href="#" class="buy" >立即抢购</a>
            </li>
        </ul>
    </div>
</body>
</html>